import React, { Component } from 'react'
// import logo from './logo.svg';
import './App.css';
// import ComA from './components/ComA'
import ComE from './components/ComE'
// import MyCSSTransition from './components/MyCSSTransition.jsx'
import MySwitchTransition from './components/MySwitchTransition.jsx'

export default class App extends Component {
  constructor() {
    super();
    // 状态机，相当于vue组件中的data，用来存放数据、初始化数据
    this.state = {
      age: 18,
      val: '6666'
    }
    this.show3 = this.show3.bind(this)
  }
  show(type1, e) {
    console.log(type1);
    console.log(e);
    console.log(this.state);
  }
  show2() {
    console.log(666);
  }
  show3(e) {
    console.log(777);
    // 阻止冒泡
    e.stopPropagation();
  }
  jump(e) {
    // 组止默认事件
    // return false 不生效
    e.preventDefault();
  }
  old() {
    // 年龄+1
    // 
    this.setState({ age: this.state.age + 1 }, () => {
      console.log(this.state.age);
    });
  }
  getVal(e) {
    // 获取输入框的修改事件
    // console.log(e.target.value);
    this.setState({
      val: e.target.value
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          {/* <ComA info="hello" msg1="123456"></ComA> */}
          {/* <ComE></ComE> */}
          {/* 过渡效果1 */}
          {/* <MyCSSTransition></MyCSSTransition> */}
          {/* 过渡效果2 */}
          <MySwitchTransition></MySwitchTransition>
          {/* ES5的绑定事件：this默认指向undefined，需要bind(this)；传参时也需要bind(this) */}
          <button onClick={this.show.bind(this, 'ES5')}>点击事件ES5</button>
          {/* ES5传递事件对象的方式是隐式传递，ES6是显式传递，需要添加e这个参数 */}
          <button onClick={(e) => this.show('ES6', e)}>点击事件ES6</button>
          <a href="http://www.bilibili.com" onClick={this.jump.bind(this)}>我是崩溃的B站</a>
          <a href="http://www.bilibili.com" onClick={(e) => this.jump(e)}>我是崩溃的B站</a>
          <div className="big" onClick={this.show2.bind(this)}>
            <div className="small" onClick={this.show3}></div>
            <div className="small2" onClick={(e) => this.show3(e)}></div>
          </div>
          <span>我的年龄：{this.state.age}</span>
          <button onClick={() => this.old()}>+1</button>
          {/* 实现一个react版本的v-model */}
          {/* <input :value="this.state.val" @change="this.state.val=e.target.value" /> */}
          <input value={this.state.val} onChange={(e) => this.getVal(e)}></input>
          <p>{this.state.val}</p>
        </header>
      </div>
    )
  }
}
